import React from 'react';
import Navbar from '../component/Navbar'
import './style/zhuanshukefu.css'

class ZhuanShuKeFu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keFuData: [],
            phonum: []
        }
    }
    componentDidMount() {
        const data = [
            { title: '呼叫客服', icon: require('./img/zhuanshukefu/icon1.png'), stye: { background: 'linear-gradient(180deg,rgba(59,225,175,1) 0%,rgba(40,209,167,1) 100%)' } },
            { title: 'QQ客服', icon: require('./img/zhuanshukefu/icon2.png'), stye: { background: 'linear-gradient(180deg,rgba(121,166,251,1) 0%,rgba(83,136,252,1) 100%)' } },
            { title: '在线客服', icon: require('./img/zhuanshukefu/icon3.png'), stye: { background: 'linear-gradient(180deg,rgba(254,143,143,1) 0%,rgba(252,86,86,1) 100%)' } },
        ];
        const phonum = [
            { title: '专属微信', icon: require('./img/zhuanshukefu/icon4.png'), num: '123324657' },
            { title: '专属微信', icon: require('./img/zhuanshukefu/icon5.png'), num: '123324657' }
        ]
        this.setState({
            keFuData: data,
            phonum: phonum
        })
    }

    goback = () => { 
        this.props.history.goBack();
    }

    render() {
        return (
            <div className='zhuanshukefu'>
                <Navbar onClick={this.goback} title='专属客服'></Navbar>
                <div className='zhuanshukefuScoll'>
                    <img className='zhuanshukefuScollKefuImg' alt='' src={require('./img/zhuanshukefu/kefu.png')} ></img>
                    <span className='zhuanshukefuScollPhone'>客服热线</span>
                    <span className='zhuanshukefuScollPhoneNum'>400-820-8820</span>
                    <div className='zhuanshukefuScollWorkTime'>
                        <span style={{ marginRight: '3rem' }}>工作日 9:00-21:00</span>
                        <span>节假日 10:00-17:00</span>
                    </div>
                    <div className='zhuanshukefuScollKeFuType'>
                        {
                            this.state.keFuData && this.state.keFuData.map((v, k) => {
                                return (
                                    <div key={v + k} style={{ ...v.stye }} className='zhuanshukefuScollKeFuTypeItem'>
                                        <img alt='' src={v.icon}></img>
                                        <span>{v.title}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='zhuanshukefuScollTitle'>
                        <span className='zhuanshukefuScollTitle2'>您的专属客户经理：</span>
                        <div className='zhuanshukefuScollTitleContent'>
                            {
                                this.state.phonum && this.state.phonum.map((v, k) => {
                                    return <div key={v + k} className='zhuanshukefuScollTitleContentItem'>
                                        <div className='zhuanshukefuScollTitleContentItemLeft'>
                                            <span>{v.title}</span>
                                            <span>{v.num}</span>
                                        </div>
                                        <img alt='' src={v.icon}></img>
                                    </div>
                                })
                            }
                        </div>
                    </div>

                </div>
            </div>
        )
    }

}
export default ZhuanShuKeFu;